// 全局样式
.van-nav-bar{
    background-color: #3196fa;
    .van-nav-bar__title {
      color:#fff;
    }
  }
// 覆盖vant自带的导航栏的样式
#app{
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  // .container是Layout.vue组件的根元素的类名
  .container{
    width: 100%;
    height: 100%;
    // logo区域
    .logo {
      background: url("../assets/logo.png") no-repeat;
      background-size: cover;
      width: 100px;
      height: 30px;
    }
    // 搜索按钮
    .search-btn {
      background-color: #5babfb;
      width: 80px;
    }
  }
  // .index 是home/index.vue组件的根元素的类名
  .index {
    height: 100%;
    // 让出顶部导航条的距离
    // 顶部在导航条是固定定位的
    padding-top:46px;
    // #app >.container >.index > .van-tabs > van-tabs__wrap + van-tabs__content
    .van-tabs {
      padding-top:50px; 
      display: flex;
      flex-direction: column;
      height: 100%;
      .van-tabs__wrap {
        position:fixed;
        top:46px; // 跟在顶部固定导航条的下方
        left:0px;
        right:30px; 
        // 标记当前选中频道的下划线
        .van-tabs__line {
          width: 30px !important;
          background-color: #3296fa;
          bottom: 20px;
        }
      }
      .van-tabs__content {
        flex:1;
        overflow: hidden;
        
        padding-bottom: 4rem;  // 能看到文章列表中的loading效果
        .van-tab__pane{ 
          height: 100%;
          // .scroll-wrapper 是home/ArticleList.vue组件的根元素的类名
          .scroll-wrapper{
            overflow:auto;
            height: 100%;
          }
        }
      }
    }
    // 频道管理的开关按钮
    .bar-btn {
      position: fixed;
      right: 5px;
      top: 57px;
      display: flex;
      align-items: center;
      background-color: #fff;
      opacity: 0.8;
      z-index:1;
      .van-icon-wap-nav{
        font-size: 20px;
      }
    }
  }